<template>
  <div>
    <van-nav-bar
      title="关于我们"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="content">
      <img
        class="header-image"
        src="https://img1.baidu.com/it/u=1008918785,1651076751&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
        alt="关于我们图片"
      />
      <h1>豆趣盲盒</h1>
      <p class="subtitle">抽全文最火盲盒</p>
      <p class="description">
        POP MART泡泡玛特，成立于2010年。发展近十年来，围绕艺术家挖掘、IP孵化运营、消费者触达以及潮玩文化推广与培育四个领域，POP MART泡泡玛特旨在用“创造潮流，传递美好”的品牌文化构建了覆盖潮流玩具全产业链的综合运营平台。
      </p>
      <van-cell-group class="cell-group">
        <van-cell title="联系电话" value="0731-5687123" />
        <van-cell title="邮箱" value="dqmhsw@jiadou.com" />
        <van-cell title="用户协议" is-link @click="goToUserAgreement" />
        <van-cell title="隐私协议" is-link @click="goToPrivacyPolicy" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
const onClickLeft = () => {
  history.back();
};

const goToUserAgreement = () => {
  window.location.href = '/user-agreement';
};

const goToPrivacyPolicy = () => {
  window.location.href = '/privacy-policy';
};
</script>

<style scoped>
.content {
  padding: 16px;
  text-align: center;
}

.header-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  margin-bottom: 16px;
}

h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 16px;
}

.description {
  font-size: 16px;
  color: #666;
  text-align: left;
  margin-bottom: 16px;
}

.cell-group {
  width: 100%;
  text-align: left;
  margin-top: 16px;
}
</style>
